<template>
  <div class="content">
    <router-link class="nav-btn" to="/home"></router-link>
    <div class="sub-head cpqd-head">
      <div class="sub-head1 cpqd-head1 animated rollIn">&nbsp;</div>
      <div class="sub-head2-wrap cpqd-head2-wrap animated height1 delay-2">
        <div class="sub-head2 cpqd-head2">&nbsp;</div>
      </div>
      <div class="sub-head3 cpqd-head3 animated bounceIn delay-4">&nbsp;</div>
      <div class="sub-head4 cpqd-head4 animated fadeIn delay-5">
        <ul class="waves">
          <li class="li1">
            <span class="ani-li"></span>
          </li>
          <li class="li2">
            <span class="ani-li"></span>
          </li>
          <li class="li3">
            <span class="ani-li"></span>
          </li>
        </ul>
      </div>
      <div class="sub-head5 cpqd-head5 animated fadeIn delay-5">
        <ul class="waves waves1">
          <li class="li1">
            <span class="ani-li"></span>
          </li>
          <li class="li2">
            <span class="ani-li"></span>
          </li>
          <li class="li3">
            <span class="ani-li"></span>
          </li>
        </ul>
      </div>
      <div class="sub-head6 cpqd-head6 animated fadeIn"></div>
    </div>
    <div class="cpqd">
      <div class="cpqdimg1">
         <div class="lbt">
          <!-- <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide>
              <img width="100%" src="../assets/images/cpqd-swiper1.jpg" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/cpqd-swiper2.jpg" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/cpqd-swiper3.jpg" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/cpqd-swiper4.jpg" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/cpqd-swiper5.jpg" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/cpqd-swiper6.jpg" alt>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper> -->
        </div>
      </div>
      <img src alt v-lazy="cpqdimg2">
      <img src alt v-lazy="cpqdimg3">
      <img src alt v-lazy="cpqdimg4">
      <img src alt v-lazy="cpqdimg5">
      <img src alt v-lazy="cpqdimg6">
    </div>
    <div class="next-bg">
      <div class="next-3 animated fadeIn"></div>
      <div class="next-4 animated fadeIn"></div>
      <div class="next-5 animated fadeIn"></div>
      <router-link to="/xmys" class="next-img-wrap">
        <img src="../assets/images/next-1.png" class="next-img" alt>
      </router-link>
    </div>
  </div>
</template>

<script>
// import 'swiper/dist/css/swiper.css'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: "cpqd",
  data() {
    return {
     cpqdimg2: require("@/assets/images/cpqd-img2.jpg"),
     cpqdimg3: require("@/assets/images/cpqd-img3.jpg"),
     cpqdimg4: require("@/assets/images/cpqd-img4.jpg"),
     cpqdimg5: require("@/assets/images/cpqd-img5.jpg"),
     cpqdimg6: require("@/assets/images/cpqd-img6.jpg"),
     // swiperOption: {
     //    autoplay: true,
     //    pagination: {
     //      el: ".swiper-pagination",
     //      clickable: true
     //    }
     //  }
    };
  },
  methods: {},
  computed: {
    //  swiper() {
    //   return this.$refs.mySwiper.swiper;
    // }
  },
  mounted: function() {},
  beforeDestroy: function() {},
  components: {
    // swiper,
    // swiperSlide
  }
};
</script>

<style scoped>
.cpqd img {
  display: block;
  width: 100%;
}
.swiper-pagination >>>.swiper-pagination-bullet-active{
    background: #d71c25;
}
.cpqd-head {
  background:url(../assets/images/cpqd-head.png); 
  background-size: 100% 100%;
  z-index: 10;
}
.cpqd-head1 {
  left: 7.625rem;
}
.cpqd-head2-wrap {
  left: 8.5rem;
  height: 5.975rem;
}
.cpqd-head2 {
  background:url(../assets/images/cpqd-head2.png); 
  background-size: 100% 100%;
}
.cpqd-head3 {
  left: 4.425rem;
  width: 9.925rem;
  height: 13.15rem;
  background:url(../assets/images/cpqd-head3.png); 
  background-size: 100% 100%;
}
.cpqd-head4{
 left: 3rem;
 top: 10.45rem;
}
.cpqd-head5{
 left: 13.325rem;
 top: 10.45rem;
}
.cpqd-head6{
  position: absolute;
  left:0;
  bottom:1.8rem ;
  width: 100%;
  height: 15.575rem;
  background: url(../assets/images/cpqd.gif) no-repeat center center;
  background-size: 100% 100%;
  transform:rotateY(180deg);
}
.cpqdimg1{
  margin-top: -1.175rem
}
</style>
